
<template>

  <div class="wrapper">
    <h2>响应式插件 npm install postcss-pxtorem 配置vue.config.js </h2>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>

    <el-upload class="upload-demo" action="#" :limit="1" :show-file-list='false' :auto-upload="false"
      :on-change="fileChange" accept="xml,.XML">
      <el-button type="info" size="small">上传<i class="el-icon-upload el-icon--right"></i></el-button>

    </el-upload>


    <input class="input" ref="file" type="file" @change="handleFileChange" />
  </div>
</template>


<script>
import axios from "axios"
import X2JS from 'x2js'


export default {

  methods: {

    // 文件发生改变
    fileChange(file, fileList) {
      let fileName = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isXML = fileName === "xml";
      const isXML1 = fileName === "XML";
      if (!isXML && !isXML1) {
        this.$message.error(
          "请上传.xml、.XML类型文件"
        );
        return
      }
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]] // 展示最后一次选择的文件


        // 文件校验
        const formData = new FormData() //FormData对象，添加参数只能通过append('key', value)的形式添加
        formData.append('file', fileList[0]) //添加文件对象
        const url = `http://127.0.0.1:4523/mock/1586363/file` //上传地址
        axios.post(url, formData)
          .then(res => {
            console.log(res.data);
          })
      }
    },
    handleFileChange(file) {
      console.log(file);
      this.parseFileXml(file.target.files
      [0])
    },

    parseFileXml(file) {
      // 获取本地上传文件路径
      const getUploadUrl = function (flie) {
        let url = "";
        if (window.createObjectURL != undefined) {
          // basic
          url = window.createObjectURL(flie);
        } else if (window.webkitURL != undefined) {
          // webkit or chrome
          url = window.webkitURL.createObjectURL(flie);
        } else if (window.URL != undefined) {
          // mozilla(firefox)
          url = window.URL.createObjectURL(flie);
        }
        return url; // 返回这样的一串地址 blob:http://www.xxxx.com/2c230fa5-ecc4-4314-ae7c-c39eaa66a945
      };

      const loadXML = function (xmlFile) {
        var xmlDom = null;
        if (window.ActiveXObject) {
          xmlDom = new ActiveXObject("Microsoft.XMLDOM");
          xmlDom.async = "false";
          xmlDom.load(xmlFile);
        } else if (
          document.implementation &&
          document.implementation.createDocument
        ) {
          var xmlhttp = new window.XMLHttpRequest();
          xmlhttp.open("GET", xmlFile, false);
          xmlhttp.send(null);
          xmlDom = xmlhttp.responseXML;
        } else {
          xmlDom = null;
        }
        return xmlDom; // 返回的是一个doucument的对象
      };

      let url = getUploadUrl(file); // 文件对象
      let xml = loadXML(url);
      let text = new XMLSerializer().serializeToString(xml) // 将text赋值给textarea阔以了
      console.log(text);
    }

  }
}

</script>

<style scoped>
.wrapper div {
  height: 1rem;
}

.box1 {
  width: 200px;
  background-color: coral;
}

.box2 {
  width: 200px;
  background-color: skyblue;
}

.box3 {
  width: 200px;
  background-color: palegreen;
}

.box4 {
  width: 200px;
  background-color: wheat;
}

.box5 {
  width: 200px;
  background-color: darkred;
}
</style>

